<template>
    <div class="privilege">
        <!-- 按钮 -->
        <div class="butn">
            <el-button size="small" type="success" round @click="toAdd">添加</el-button>
        </div>
        <!-- 表格 -->
        <div class="tbl">
             <el-table :data="list" style="width: 100%" size="small">
             <el-table-column type="index" label="序号"> </el-table-column>
             <el-table-column prop="name" label="名称" width="180"> </el-table-column>
             <el-table-column prop="icon" label="图标"> </el-table-column>
             <el-table-column prop="type" label="类型"> </el-table-column>
             <el-table-column prop="path" label="路径" width="180"> </el-table-column>
             <el-table-column prop="isHidden" label="隐藏"> </el-table-column>
             <el-table-column prop="introduce" label="介绍" width="180"> </el-table-column>
             <el-table-column prop="parentName" label="父项目"> </el-table-column>
             <el-table-column label="操作" width="150" align="center">
                 <template v-slot = "scope">
                     <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                     <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
                 </template>
             </el-table-column>
             </el-table>
        </div>
        <!-- 模态框 -->
        <div class="mdbx">
            <el-dialog class="custom_model" title="添加Privilege" :visible.sync="dialogVisible" width="%60">
            {{form}}
            <el-form :model="form" label-width="100px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"> </el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="form.icon"> </el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="form.type"> </el-input>
                </el-form-item>
                <el-form-item label="路径">
                    <el-input v-model="form.path"> </el-input>
                </el-form-item>
                <el-form-item label="显示状态">
                    <el-input v-model="form.isHidden"> </el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="form.introduce"> </el-input>
                </el-form-item>
                <el-form-item label="父项目">
                    <el-input v-model="form.parentId"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </span>
            </el-dialog>
        </div>

            
    </div>
</template>

<script>
// 与后台交互的api工具
import {get,post} from '@/utils/request'
export default {
    data(){
        return {
            input1: '',
            form:{},
            list:[],
            dialogVisible:false,

        }
    },
    created() {
        this.loadData();
    },
    methods:{
        save(){
            let url = "/Privilege/insertOrUpdate"
            get(url,this.form).then( (response)=>{
                this.dialogVisible = false;
                this.$message({type:"success",message:response.message});
                this.loadData();
            } )
        },
    del(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            let url = "/Privilege/deleteInId"
            post(url,{id:row.id}).then( (response)=>{
                // 1. 提示
                this.$message({type:"success",message:response.message})
                // 2. 刷新 
                this.loadData();
            } )
            })
        },
        edit(row){
            this.form=row;
            this.dialogVisible=true;
        },
        toAdd(){
            this.dialogVisible=true;
        },
        loadData(){
            let url = "/Privilege/findAll";
            post(url).then((response)=>{
                this.list = response.data;
            });
        },
        
    }
}
</script>

<style scoped>

</style>